<template>
  <div class="payment">
    <div class="top">
      <van-icon name="arrow-left" size="25" @click="onClickLeft"></van-icon>
      <h3 class="text">请微信扫描二维码付款</h3>
      <div id="ercode" v-qr="options" v-if="ercodeShow">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
// import QRCode from "qrcodejs2";
// import qrcode from 'vue-qrcode-directive'
// import "@/assets/pay/weixin.webp"
// import "../../assets/pay/weixin.webp"
export default {
  data() {
    return {
      t1: null,
      code: 0,
      orderInfo: {},
      ercodeShow: false,
      options: {
        text: ""
      },
      orderid: this.$route.query.name
    }
  },
  mounted() {
      this.getpayCode()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
      clearInterval(this.t1)
    },

    async getpayCode() {//----------得到付款二维码------
      // ------模拟是否支付过程------,
      // this.t1 = setInterval(() => {
      //   this.payEnd()
      //   this.code += 1
      // }, 1000)
      // -----------------------------,
      // console.log(this.$route)
      let res1 = await axios({
        method: "POST",
        // this.$route.query.orderid字符串
        // url: `/api/wxpay/getpayurl?orderid=${this.$route.query.name}&desc=1486115153345454&amount=1`,
        // url: `http://192.168.10.53:8000/wxpay/getpayurl`,
        url: `/api/wxpay/getpayurl`,
        data: {
          orderid: this.orderid,
          desc: "1486115153345454",
          amount: 1
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      console.log(res1.data)
      this.options = {
        width: 250,
        height: 250,
        text: res1.data,
        render: "canvas",
        typeNumber: -1,
        correctLevel: 2,
        colorDark: "#b3dbef",
        background: "#ffffff",
        foreground: "#000000"
      }
      this.ercodeShow = true
      // ---------二维码回来后，事件轮巡，--------------------,
      this.t1 = setInterval(async () => {
        this.payEnd()
      }, 5000)
    },
    async payEnd() {//事件轮巡
      // ------模拟是否支付过程------,
      // console.log("支付中")
      // if (this.code == 5) {
      //   clearInterval(this.t1)
      //   this.$router.push('/paysussess')
      // }
      // -----------------------------,
      let res2 = await axios({
        method: "POST",
        url: "/api/wxpay/querystatus",
        data: {
          orderid: this.$route.query.name,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      console.log(res2)
      if (res2.data.code == 200) {
        clearInterval(this.t1)
        this.$router.push({ path: '/paysussess', query: { orderInfo: res2.data.data } })
      }
    },
  },
  deactivated() {
    clearInterval(this.t1)
  }
}

</script>
<style scoped lang="scss">
.payment {
  height: 100vh;
  font-weight: 100vw;
  overflow: hidden;

  .top {
    height: 40vh;
    background: linear-gradient(#cdfebe, #f8f8f8);
    position: relative;

    .text {
      height: 20vh;
      line-height: 20vh;
      width: 100vw;
      text-align: center;
    }


    #ercode {
      // background: #b3dbef;
      position: absolute;
      top: 25vh;
      border-radius: 20px;
      // margin: 0 auto
      left: 0;
      right: 0;
      transform: translateX(16%);

    }
  }


}
</style>





